import React, {Suspense, useState} from "react";

const ComingSoon = React.lazy(() => import("./ComingSoon"));
const NowPlaying = React.lazy(() => import("./NowPlaying"));
export default function App() {
    const [type, setType] = useState(1);

    return <div>
        <button onClick={() => setType(1)}>正在热映</button>
        <button onClick={() => setType(2)}>即将上映</button>
        {/*React.lazy()的工作原理是动态导入（import()）组件。在你点击按钮切换 type时，对应的组件（NowPlaying或 ComingSoon）才开始加载，这个加载是异步的*/}
        {/*Suspense的作用就是在这个异步加载完成之前，“悬停” 并显示你指定的 fallback内容（如"正在加载中....."）。一旦组件加载成功，Suspense会替换 fallback内容，渲染出目标组件*/}
        <Suspense fallback={<div>正在加载中.....</div>}>
            {type === 1 ? <NowPlaying /> : <ComingSoon />}
        </Suspense>
    </div>;
}